<!--暂时还不知道如何描述这个组件 create to by doujiabao - 2020305-->

<template>
    <div id="page" :class="{ isNavigation: isNavigation }">
        <div v-if="fetched">
            <slot></slot>
            <ul class="tabs" v-if="isNavigation">
                <li
                    v-for="(item, index) in tabs"
                    v-bind:key="item.key"
                    :class="{ tabItem: true, tabActive: navIndex === index }"
                    @click="routerLink(index, item.path)"
                >
                    {{ item.name }}
                </li>
            </ul>
        </div>
        <div v-if="!fetched">
            <div class="loading">
                <img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583902747963&di=afa2fe668493cc5ce8a137658dd7ecaf&imgtype=0&src=http%3A%2F%2Fwww.17qq.com%2Fimg_biaoqing%2F26206262.jpeg"
                    alt="loading"
                />
                <p>加载中</p>
            </div>
        </div>
    </div>
</template>

<script>
import logo from "@/assets/logo.png";

export default {
    //wsyn
    name: "page",
    //默认参数
    props: {
        isNavigation: {
            type: Boolean,
            default: false
        },
        fetched: {
            type: Boolean,
            default: false
        },
        //暂时废弃
        fetching: {
            type: Boolean,
            default: true
        }
    },
    //数据
    data() {
        return {
            logoImage: logo,
            //导航列表
            tabs: [
                {
                    id: "home",
                    name: "首页",
                    path: "/",
                    icon: "fire-o"
                },
                {
                    id: "message",
                    name: "消息",
                    path: "/message",
                    icon: "chat-o"
                },
                {
                    id: "user",
                    name: "我",
                    path: "/user",
                    icon: "user-circle-o"
                }
            ],
            //当前选中的导航
            navIndex: 0
        };
    },
    //组件注入
    components: {},
    //初始化
    mounted() {},
    //方法
    methods: {
        /**
         * 路由跳转
         * @param index
         * @param link
         */
        routerLink(index, path) {
            // 点击哪个路由就赋值给自定义的下下标
            this.navIndex = index;
            // 路由跳转
            this.$router.push(path);
        },

        /**
         * 检索当前路径
         * @param path
         */
        checkRouterLocal(path) {
            // 查找当前路由下标高亮
            this.navIndex = this.nav.findIndex(item => item.path === path);
        }
    },
    watch: {
        $route() {
            // 获取当前路径
            let path = this.$route.path;
            // 检索当前路径
            this.checkRouterLocal(path);
        }
    }
};
</script>

<style scoped lang="stylus">
#page {
    width: 100%;
}

.loading {
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%);
}

.loading img {
    display: block;
    width: 300px;
    margin: 30px auto 80px;
}

.loading p {
    text-align: center;
    font-size: 24px;
}

.isNavigation {
    padding-bottom: 100px;
}

.tabs {
    width: 750px;
    height: 100px;
    background: #ffffff;
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    align-items: center;
}

.tabItem {
    flex-grow: 1;
    text-align: center;
    height: 100px;
    line-height: 100px;
    font-size: 30px;
    color: #62b587;
    border-radius: 4px;
}

.tabActive {
    background: #62b587;
    color: #fff;
}
</style>
